<!--
 * @Description: 减脂营管理界面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-05-12 11:24:46
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-06-03 21:56:31
 -->
<template>
  <div class="app-container" style="padding: 30px 50px;">
    <eHeader :query="query" :sup-this="supThis" />

    <!-- 减脂营数据 -->
    <div class="no-content" v-if="!data">
      <img src="../../../assets/img/empty.png" alt="">
      暂无数据
    </div>
    <div style="overflow:hidden;" v-else>
      <div class="fat-camp-list">
        <div v-for="camp in data" :key="camp.id" class="fat-camp-block">
          <p style="text-align:left;margin: 5px 0 0 -10px;position: absolute;">{{camp.id}}</p>
          <span @click="goCampList(camp.id)">
            {{ camp.camp_name }}
            <br>
            <p style="color: #aaa; font-size: 12px; margin-top: 5px;">{{ camp.admin_name }}</p>
          </span>
          
          <div class="options-camp">
            <i class="icon-questionnaire" title="用户列表" style="margin-right:8px;" @click="goCampRank(camp.id)"></i>
            <edit :data="camp" :sup-this="supThis" class="fr" />
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>

    <!--分页组件-->
    <el-pagination
      :total="total"
      :page-size="limit"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import eHeader from './module/header'
import edit from './module/edit'

export default {
  components: {
    eHeader, edit
  },
  mixins: [initData],
  data () {
    return {
      supThis: this,
      query: {},
      limit: 20,
      openDate: '',
      start_time: '',
      camplist: {},
      camp_name: '',
      campname: '',
      nocontent: false,
      update_id: '',
      update_campname: '',
      updateVisible: false,
    }
  },
  created () {
    this.initParams()
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      this.url = '/admin/v1/camp'
      const sort = 'id,desc'
      this.params = { page: this.page, limit: this.limit, sort: sort }
      const query = this.query
      for (const k in query) {
        if (query[k]) { this.params[k] = query[k] }
      }
      return true
    },
    initParams() {
      //查询渠道信息
      this.$api.enterprise.channel
        .cascadeSecond({
          params: { status: 1 }
        })
        .then(res => {
          this.secondChannels = res.data.channels
        }).catch(err => {
          console.log(err)
        })
    },
    goCampRank(cid) {
      this.$router.push('/order/campDetail/' + cid + '?type=rank')
    },
    goCampList(id) {
      this.$router.push('/order/campDetail/' + id + '?type=service')
    }
  }
}
</script>
<style>
  .fat-camp-block{
    position: relative;
    height: 100px;
    background: #fff;
    border:2px solid #30d4ee;
    color: #000;
    font-size: 14px;
    width: 200px;
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
    display: table;
    float: left;
    margin-right: 48px;
    padding: 0 20px;
    margin-bottom: 30px;
    box-shadow: 2px 3px 3px rgba(135, 132, 132, 0.52);
    cursor: pointer;
    box-sizing: unset;
  }
  .fat-camp-block span{
    display: table-cell;
    vertical-align: middle;
  }
  .fat-camp-block .options-camp {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 9;
    display: none;
    width: 50px;
    text-align: right;
  }
  .fat-camp-block .options-camp i {
    font-size: 16px;
    color: #999;
    background: #fff;
  }
  .fat-camp-block:hover{
    background: rgba(32, 182, 249, 0.07);
  }
  .fat-camp-block:hover .options-camp {
    display: block;
  }
  .no-content{
    font-size: 15px;
    text-align: center;
  }
  .no-content img{
    width: 100px;
    margin: 0 auto;
    display: block;
    padding-bottom: 20px;
  }
</style>
